{% extends 'base.html' %}
{% load static %}

{% block title %}购票 - {{ screening.movie.title }} - 电影院票务管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2 class="mb-4"><i class="fas fa-ticket-alt me-2"></i>选择座位</h2>
        
        <!-- 调试信息 -->
        <div class="alert alert-info mb-4">
            <h6><i class="fas fa-info-circle me-2"></i>调试信息</h6>
            <p class="mb-1">场次ID: {{ screening.id }}</p>
            <p class="mb-1">影厅: {{ screening.hall.name }} ({{ screening.hall.capacity }}个座位)</p>
            <p class="mb-1">总座位数: {{ seats.count }}</p>
            <p class="mb-1">已售座位数: {{ sold_seats|length }}</p>
            <p class="mb-0">可用座位数: {{ seats.count|add:"-"|add:sold_seats|length }}</p>
        </div>
        
        <!-- 场次信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>场次信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>{{ screening.movie.title }}</h6>
                        <p class="text-muted mb-1">{{ screening.movie.director }}</p>
                        <p class="text-muted mb-1">{{ screening.movie.genre }}</p>
                    </div>
                    <div class="col-md-6">
                        <p class="mb-1"><i class="fas fa-calendar me-1"></i>{{ screening.start_time|date:"Y年m月d日 H:i" }}</p>
                        <p class="mb-1"><i class="fas fa-building me-1"></i>{{ screening.hall.name }} ({{ screening.hall.hall_type }})</p>
                        <p class="mb-0"><i class="fas fa-yen-sign me-1"></i><strong class="text-primary">¥{{ screening.price }}</strong></p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 座位选择 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chair me-2"></i>座位选择</h5>
            </div>
            <div class="card-body">
                <!-- 座位图例 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="seat-legend">
                            <div class="seat-legend-item">
                                <div class="seat" style="background-color: #e9ecef;"></div>
                                <span>可选</span>
                            </div>
                            <div class="seat-legend-item">
                                <div class="seat selected"></div>
                                <span>已选</span>
                            </div>
                            <div class="seat-legend-item">
                                <div class="seat sold"></div>
                                <span>已售</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 银幕 -->
                <div class="text-center mb-4">
                    <div class="screen">
                        <i class="fas fa-tv me-2"></i>银幕
                    </div>
                </div>
                
                <!-- 座位网格 -->
                <form method="post" id="booking-form">
                    {% csrf_token %}
                    <div class="seat-grid mb-4" id="seat-grid">
                        {% for seat in seats %}
                            <div class="seat {% if seat.id in sold_seats %}sold{% endif %}" 
                                 data-seat-id="{{ seat.id }}"
                                 data-seat-number="{{ seat.seat_number }}"
                                 title="{{ seat.seat_number }}"
                                 onclick="toggleSeat(this)">
                                {{ seat.seat_number }}
                                <input type="checkbox" name="seats" value="{{ seat.id }}" 
                                       {% if seat.id in sold_seats %}disabled{% endif %} 
                                       style="display: none;">
                            </div>
                        {% endfor %}
                    </div>
                    
                    <!-- 选择信息 -->
                    <div class="text-center">
                        <div id="selected-seats-display" class="alert alert-info d-none mb-3">
                            <strong>已选择座位：</strong><span id="selected-seats-list">无</span>
                        </div>
                        <div class="mb-3">
                            <span class="text-muted">单价：</span>
                            <span id="price-per-seat" data-price="{{ screening.price }}" class="text-primary fw-bold">¥{{ screening.price }}</span>
                            <span class="text-muted ms-3">总价：</span>
                            <span id="total-price" class="text-primary fw-bold">¥0.00</span>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg" id="submit-btn" disabled>
                            <i class="fas fa-credit-card me-1"></i>确认购票
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 全局变量
let selectedSeats = new Set();
let selectedSeatNumbers = new Set();
let pricePerSeat = 0;

// 座位切换函数
function toggleSeat(seatElement) {
    if (seatElement.classList.contains('sold')) {
        return; // 已售座位不能选择
    }
    
    const seatId = seatElement.dataset.seatId;
    const seatNumber = seatElement.dataset.seatNumber;
    const checkbox = seatElement.querySelector('input[type="checkbox"]');
    
    console.log('点击座位:', seatId, seatNumber);
    
    if (seatElement.classList.contains('selected')) {
        // 取消选择
        seatElement.classList.remove('selected');
        selectedSeats.delete(seatId);
        selectedSeatNumbers.delete(seatNumber);
        checkbox.checked = false;
        console.log('取消选择座位:', seatNumber);
    } else {
        // 选择座位
        seatElement.classList.add('selected');
        selectedSeats.add(seatId);
        selectedSeatNumbers.add(seatNumber);
        checkbox.checked = true;
        console.log('选择座位:', seatNumber);
    }
    
    updateDisplay();
}

// 更新显示
function updateDisplay() {
    const count = selectedSeats.size;
    const totalPrice = count * pricePerSeat;
    const selectedSeatsDisplay = document.getElementById('selected-seats-display');
    const selectedSeatsList = document.getElementById('selected-seats-list');
    const totalPriceElement = document.getElementById('total-price');
    const submitBtn = document.getElementById('submit-btn');
    
    console.log('更新显示 - 选择座位数:', count, '总价:', totalPrice);
    console.log('选择的座位号:', Array.from(selectedSeatNumbers));
    
    if (count > 0) {
        // 显示选择的座位号
        const seatNumbersArray = Array.from(selectedSeatNumbers).sort();
        selectedSeatsList.textContent = seatNumbersArray.join(', ');
        
        selectedSeatsDisplay.classList.remove('d-none');
        totalPriceElement.textContent = `¥${totalPrice.toFixed(2)}`;
        submitBtn.disabled = false;
        
        // 更新按钮文本
        submitBtn.innerHTML = `<i class="fas fa-credit-card me-1"></i>确认购票 (${count}个座位)`;
    } else {
        selectedSeatsList.textContent = '无';
        selectedSeatsDisplay.classList.add('d-none');
        totalPriceElement.textContent = '¥0.00';
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-credit-card me-1"></i>确认购票';
    }
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('=== 座位选择页面初始化 ===');
    
    // 获取单价
    const priceElement = document.getElementById('price-per-seat');
    pricePerSeat = parseFloat(priceElement.dataset.price);
    
    console.log('单价:', pricePerSeat);
    console.log('可用座位数量:', document.querySelectorAll('.seat:not(.sold)').length);
    
    // 表单提交验证
    document.getElementById('booking-form').addEventListener('submit', function(e) {
        console.log('表单提交 - 选择座位数:', selectedSeats.size);
        console.log('选择的座位ID:', Array.from(selectedSeats));
        console.log('选择的座位号:', Array.from(selectedSeatNumbers));
        
        if (selectedSeats.size === 0) {
            e.preventDefault();
            alert('请至少选择一个座位');
            return false;
        }
        
        // 显示确认对话框
        const seatNumbersArray = Array.from(selectedSeatNumbers).sort();
        const confirmMessage = `确认购买以下座位吗？\n\n座位：${seatNumbersArray.join(', ')}\n数量：${selectedSeats.size}个\n总价：¥${(selectedSeats.size * pricePerSeat).toFixed(2)}`;
        if (!confirm(confirmMessage)) {
            e.preventDefault();
            return false;
        }
        
        // 禁用提交按钮防止重复提交
        const submitBtn = document.getElementById('submit-btn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>处理中...';
        
        console.log('确认购票，提交表单');
    });
    
    // 初始化显示
    updateDisplay();
    
    console.log('=== 座位选择页面初始化完成 ===');
});
</script>
{% endblock %} 